<template>
  <div class="message">
    <el-container direction="vertical">
      <el-main class="message-card-main" style="margin-bottom: 30px;margin-top: 60px">
        <el-card shadow="hover">
          <el-row>
            <h1>留言板</h1>
          </el-row>
          <el-row>
            <message-edit-component/>
          </el-row>
        </el-card>
      </el-main>
      <el-main class="message-card-main">
        <el-card shadow="hover" class="infinite-list-wrapper">
            <div
              class="list"
              v-infinite-scroll="load"
              infinite-scroll-immediate="true"
              infinite-scroll-disabled="disabled">
              <div v-for="i in count" class="list-item" :key="i">
                <commentComponent :msg="i"/>
                <hr class="messageDivider" v-if="count>1&&i<count"/>
              </div>
            </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import commentComponent from './commentComponent'
import messageEditComponent from './messageEditComponent'

export default {
  name: 'message',
  data () {
    return {
      count: 10,
      loading: false
    }
  },
  computed: {
    noMore () {
      return this.count >= 20
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    load () {
      this.loading = true
      setTimeout(() => {
        this.count += 2
        this.loading = false
      }, 2000)
    }
  },
  components: {commentComponent, messageEditComponent}
}
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .message-card-main {
    padding-left: 130px;
    padding-right: 130px;
  }

  .messageDivider {
    border-top: 1px dotted #8c8b8b;
  }
</style>
